import {
	Button,
	Collapse,
	Form,
	Row,
	Col,
	Input,
	Select,
	DatePicker,
	Modal,
	message,
	Steps,
	Tag,
} from 'antd'
import React, {useState, useEffect, memo, useRef} from 'react'
import {history, connect} from 'umi'

import moment from 'moment'
import styles from './index.less'
import {
	getSummaryDetail,
	getSummaryDetailPage,
} from '@/service/marketing/awardSettlement/subsidy'
import {getOrderType} from '@/service/marketing/commodity'
import {
	getProcessList,
	getAuditRecordList,
	getSettlementUpdate,
} from '@/service/marketing/awardSettlement/processList'

import {getDict} from '@/service/common/dict'
import {summaryType, yesoRno, handlingStatus, ruleList} from '../../../dict'
// 可编辑表格
import CustomTable from '@/components/Table'
import 'moment/locale/zh-cn'
import {GlobalState} from '@/models/global'

const {Panel} = Collapse
const {TextArea} = Input
const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)
export interface FixedBarProps {
	global: GlobalState
	dispatch: any
	location: any
}
const view = memo(
	({global: {currentRoute}, dispatch, location}: FixedBarProps) => {
		const [orderType, setOrderType] = useState([])
		const [form] = Form.useForm()
		const [dict, setDict] = useState({
			orderLocation: [],
			subsidy_mode: [],
			physical_state: [],
			issue_kind: [],
		})
		const [formViewOpen, setFormViewOpen] = useState(false)
		const [detailForm] = Form.useForm()

		const [processViewOpen, setProcessViewOpen] = useState(false)
		const [processList, setProcessList] = useState([])
		const [stepCurrent, setStepCurrent] = useState(0)

		// 可编辑表格
		const [params, setParams] = useState({
			current: 1,
			size: 10,
		})
		const [total, setTotal] = useState(0)
		const [loading, setLoading] = useState(false)
		const [dataSourse, setDataSourse] = useState([])

		/** 获取订单类型列表 */
		const getOrderTypeFun = () => {
			getOrderType().then((res: any) => {
				if (res?.success) {
					setOrderType(() => res?.data)
				}
			})
		}
		// 初始化无条件接口
		useEffect(() => {
			getOrderTypeFun()
			getDict(
				{
					dictKeys: [
						'orderLocation',
						'subsidy_mode',
						'physical_state',
						'issue_kind',
					],
				},
				(res: any) => {
					setDict(res)
				},
			)
		}, [])

		// 初始化-详情数据
		const getDetail = (orderNo: string) => {
			getSummaryDetail({orderNo}).then((res: any) => {
				if (res?.success) {
					const reaData = {
						...res.data,
						subsidyMonth: res?.data?.subsidyMonth
							? moment(res?.data?.subsidyMonth)
							: '',
						collectionMonth: res?.data?.collectionMonth
							? moment(res?.data?.collectionMonth)
							: '',
						orderDate: res?.data?.orderDate
							? moment(res?.data?.orderDate)
							: '',
						dateOfCollection: res?.data?.dateOfCollection
							? moment(res?.data?.dateOfCollection)
							: '',
						contractStartDate: res?.data?.contractStartDate
							? moment(res?.data?.contractStartDate)
							: '',
						contractEndDate: res?.data?.contractEndDate
							? moment(res?.data?.contractEndDate)
							: '',
						estimatedEndDate: res?.data?.estimatedEndDate
							? moment(res?.data?.estimatedEndDate)
							: '',
						actualOrderEndDate: moment(
							res?.data?.actualOrderEndDate,
						),
						lastDateCollection: res?.data?.lastDateCollection
							? moment(res?.data?.lastDateCollection)
							: '',
						lastEndDate: res?.data?.lastEndDate
							? moment(res?.data?.lastEndDate)
							: '',
						orderLocation: res?.data?.orderLocation?.toString(),
						city: [res?.data?.provinceId, res?.data?.cityId],
					}
					form.setFieldsValue(reaData)
				}
			})
		}

		// 获取表格数据
		const onListFun = () => {
			const {ids} = location.query
			setLoading(true)
			getSummaryDetailPage({settlementIds: ids})
				.then((res: any) => {
					if (res?.success) {
						setDataSourse(() => res?.data?.records)
						setTotal(() => res?.data?.total)
					}
					setLoading(false)
				})
				.catch(() => {
					setLoading(false)
				})
		}

		// 获取流程记录
		const onProcessList = (id: string) => {
			getProcessList({id})
				.then((res: any) => {
					if (res?.success) {
						const sCurrent = res?.data?.filter(
							(item: any) => item?.nodeType === 1,
						)
						const step = res?.data?.map(
							(item: {
								activityName: string
								assignee: string
								endTime: string
								message: string
							}) => ({
								title: item?.activityName,
								description: (
									<>
										<div style={{margin: '8px 0 8px'}}>
											{item?.assignee}
										</div>
										<div style={{margin: '8px 0 8px'}}>
											{item?.endTime}
										</div>
										<div style={{margin: '0 0 30px'}}>
											{item?.message}
										</div>
									</>
								),
							}),
						)
						setStepCurrent(() => Number(sCurrent?.length) - 1)
						setProcessList(() => step)
					}
				})
				.catch((err: any) => {
					message.error(err)
				})
		}

		// 补扣费审核记录查看
		const onAuditRecordList = (id: string) => {
			getAuditRecordList({settlementId: id})
				.then((res: any) => {
					if (res?.success) {
						detailForm.setFieldsValue({
							...res?.data[0],
							createTime: moment(res?.data[0]?.createTime),
						})
					}
				})
				.catch((err: any) => {
					message.error(err)
				})
		}

		// 备注编辑
		const onSettlementUpdate = (id: string, remarks: string) => {
			getSettlementUpdate({id, remarks})
				.then((res: any) => {
					if (res?.success) {
						message.success(res?.msg)
					} 
				})
				.catch((err: any) => {
					message.error(err)
				})
		}

		// 可编辑表格
		const columns: any = [
			{
				title: '序号',
				dataIndex: 'order',
				align: 'center',
				width: 70,
				render(text: any, record: any, index: any) {
					return <span>{(params.current - 1) * 10 + index + 1}</span>
				},
			},
			{
				title: '类型',
				dataIndex: 'type',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any, row: any) => (
					<>
						{summaryType?.map(
							(item: {key: number; label: string}) => {
								if (Number(item?.key) === Number(row?.type)) {
									return <span>{item?.label}</span>
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '补贴规划编号',
				dataIndex: 'subsidyRuleNo',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '适用订单类型',
				dataIndex: 'orderType',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '考核期开始时间',
				dataIndex: 'startTime',
				width: 150,
				align: 'center',
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '考核期结束时间',
				dataIndex: 'endTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '本期考核起始时间',
				dataIndex: 'startTimeOfCurrent',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '本期考核结束时间',
				dataIndex: 'endTimeOfCurrent',
				align: 'center',
				width: 250,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '本期考核期结束是否在租',
				dataIndex: 'isItUnderLease',
				align: 'center',
				width: 250,
				ellipsis: true,
				render: (text: any, row: any) => (
					<>
						{yesoRno?.map((item: {key: number; label: string}) => {
							if (
								Number(item?.key) ===
								Number(row?.isItUnderLease)
							) {
								return <span>{item?.label}</span>
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '安全奖是否达标',
				dataIndex: 'safetyAward',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '是否无欠租',
				dataIndex: 'rentArrears',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '欠租金额',
				dataIndex: 'amountInArrears',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>{Number(text) >= 0 && text ? text : '--'}</>
				),
			},
			{
				title: '是否无违章',
				dataIndex: 'violation',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '未处理违章扣分',
				dataIndex: 'violationsDeductPoints',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>{Number(text) >= 0 && text ? text : '--'}</>
				),
			},
			{
				title: '是否无出险',
				dataIndex: 'accident',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: 'X月出险次数',
				dataIndex: 'accidentsNumber',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>{Number(text) >= 0 && text ? text : '--'}</>
				),
			},
			{
				title: '是否提前完成年检',
				dataIndex: 'annualInspection',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '冲单奖是否达标',
				dataIndex: 'singleAward',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: 'X月日均完单量',
				dataIndex: 'averageDailyCompletion',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: 'X月月完单量',
				dataIndex: 'monthlyCompletion',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: 'X月日均TSH',
				dataIndex: 'averageDailyTsh',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: 'X月月TSH',
				dataIndex: 'monthlyTsh',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: 'X月日均高峰TSH',
				dataIndex: 'averageDailyPeakTsh',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: 'X月月高峰TSH',
				dataIndex: 'monthlyPeakTsh',
				align: 'center',
				width: 200,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},

			{
				title: '合规是否达标',
				dataIndex: 'compliance',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '是否有认证',
				dataIndex: 'certification',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => (
					<>
						{ruleList?.map((item: {key: number; label: string}) => {
							if (Number(item?.key) === Number(text)) {
								return (
									<Tag color="processing">{item?.label}</Tag>
								)
							}
							return ''
						})}
					</>
				),
			},
			{
				title: 'X月是否符合奖励发放',
				dataIndex: 'awardDistribution',
				align: 'center',
				width: 250,
				ellipsis: true,
				render: (text: any) => (
					<>
						{yesoRno?.map((item: {key: number; label: string}) => {
							if (
								Number(item?.key) ===
								Number(text)
							) {
								return <span>{item?.label}</span>
							}
							return ''
						})}
					</>
				),
			},
			{
				title: '奖励发放方式',
				dataIndex: 'subsidyMode',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any, row: any) => (
					<>
						{dict?.subsidy_mode?.map(
							(item: {dictKey: number; dictValue: string}) => {
								if (
									Number(item?.dictKey) ===
									Number(row?.subsidyMode)
								) {
									return <span>{item?.dictValue}</span>
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '天数',
				dataIndex: 'days',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '金额',
				dataIndex: 'amount',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '实物名称',
				dataIndex: 'physicalName',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) =>
					Number(text) > 0 && text
						? dict.issue_kind.map(
								(item: {
									dictKey: number
									dictValue: string
								}) => {
									if (
										Number(item?.dictKey) === Number(text)
									) {
										return <span>{item?.dictValue}</span>
									}
									return ''
								},
						  )
						: '--',
			},
			{
				title: '发放月份',
				dataIndex: 'distributionMonth',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '奖励生成时间',
				dataIndex: 'awardGenerationTime',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any) => <span>{text || '--'}</span>,
			},
			{
				title: '备注',
				dataIndex: 'remarks',
				align: 'center',
				width: 150,
				render: (text: any, row: any) => (
					<>
						<Input
							placeholder="请输入备注"
							maxLength={30}
							defaultValue={text}
							onBlur={(e) => {
								e.persist()
								onSettlementUpdate(
									row?.id,
									e.target.defaultValue,
								)
							}}
						/>
					</>
				),
			},
			{
				title: '发放状态',
				dataIndex: 'distributionStatus',
				align: 'center',
				width: 150,
				ellipsis: true,
				render: (text: any, row: any) => (
					<>
						{dict?.physical_state?.map(
							(item: {dictKey: number; dictValue: string}) => {
								if (
									Number(item?.dictKey) ===
									Number(row?.distributionStatus)
								) {
									return <span>{item?.dictValue}</span>
								}
								return ''
							},
						)}
					</>
				),
			},
			{
				title: '审核记录',
				dataIndex: 'auditRecord',
				align: 'center',
				width: 150,
				ellipsis: true,
				fixed: 'right',
				render: (text: any, row: any) => (
					<>
						<Button
							type="link"
							size="small"
							onClick={() => {
								if (row?.type === 1) {
									onProcessList(row?.settlementId)
									setProcessViewOpen(true)
								} else if (row?.deductionAuditStatus === 0) {
									message.warning(
										'目前处于未审核状态，暂无补扣费审核记录！',
									)
								} else {
									onAuditRecordList(row?.settlementId)
									setFormViewOpen(true)
								}
							}}>
							查看
						</Button>
					</>
				),
			},
		]
		// 获取表格数据
		// 自定义一个初始不更新的hook
		const useUpdateEffect = (fn: Function, inputs: any[]) => {
			const didMountRef = useRef(false)
			useEffect(() => {
				if (didMountRef.current) fn()
				else didMountRef.current = true
			}, inputs)
		}

		// 使用自定义hook
		useUpdateEffect(onListFun, [params])
		// 页面数据初始化
		useEffect(() => {
			const {orderNo} = location.query
			getDetail(orderNo)
			onListFun()
		}, [])

		const onCancelformView = () => {
			setFormViewOpen(false)
			detailForm.resetFields()
		}

		const onCancelProcessView = () => {
			setProcessViewOpen(false)
		}

		return (
			<div className={styles.admittanceAdd}>
				<div className={`${styles.content} ${styles.formDetils}`}>
					<Collapse
						defaultActiveKey={['1', '2']}
						ghost
						expandIconPosition="end">
						<Panel header={customizeHeader('基础信息')} key="1">
							<Form
								form={form}
								name="basic"
								layout="horizontal"
								labelCol={{flex: '220px'}}
								labelAlign="right"
								labelWrap
								initialValues={{remember: true}}
								autoComplete="off"
								disabled>
								<Row gutter={12}>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="审核单号"
											name="auditSheetNo">
											<Input
												placeholder="请输入审核单号"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="补贴月份"
											name="subsidyMonth">
											<DatePicker format="YYYY-MM" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="提车月份"
											name="collectionMonth">
											<DatePicker format="YYYY-MM" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="城市名称"
											name="cityName">
											<Input
												placeholder="请输入城市名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="主体名称"
											name="principalName">
											<Input
												placeholder="请输入主体名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="公司"
											name="corporateName">
											<Input
												placeholder="请输入公司"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="司机名称"
											name="driverName">
											<Input
												placeholder="请输入司机名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="司机ID"
											name="driverId">
											<Input
												placeholder="请输入司机ID"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单位置"
											name="orderLocation">
											<Select
												allowClear
												placeholder="请选择订单位置"
												fieldNames={{
													value: 'dictKey',
													label: 'dictValue',
												}}
												options={[
													...dict.orderLocation,
												]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单类型"
											name="orderType">
											<Select
												allowClear
												placeholder="请选择订单类型"
												fieldNames={{
													value: 'code',
													label: 'name',
												}}
												options={[...orderType]}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单标签"
											name="orderLabel">
											<Input
												placeholder="请输入订单标签"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单号"
											name="orderNo">
											<Input
												placeholder="请输入订单号"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="交付模式"
											name="deliveryMode">
											<Input
												placeholder="请输入交付模式"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单状态"
											name="orderStatus"
											rules={[{required: true}]}>
											<Input placeholder="请输入订单状态" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item label="车牌号" name="carNo">
											<Input
												placeholder="请输入车牌号"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="品牌名称"
											name="brandName">
											<Input
												placeholder="请输入品牌名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="车型名称"
											name="modelName">
											<Input
												placeholder="请输入车型名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="车款名称"
											name="vehicleModelName">
											<Input
												placeholder="请输入车款名称"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="网约车订单品类"
											name="orderCategory">
											<Input
												placeholder="请输入网约车订单品类"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="下单日期"
											name="orderDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="提车日期"
											name="dateOfCollection">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="租期"
											name="leaseTerm">
											<Input
												placeholder="请输入租期"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同开始日"
											name="contractStartDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="合同结束日"
											name="contractEndDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>

									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="预计结束日期"
											name="estimatedEndDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单号"
											name="orderNo">
											<Input placeholder="请输入订单号" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="订单实际结束日期"
											name="actualOrderEndDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="上一个订单ID"
											name="lastOrderNo">
											<Input
												placeholder="请输入上一个订单ID"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="上一个订单提车日期"
											name="lastDateCollection">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="上一个订单结束日期"
											name="lastEndDate">
											<DatePicker format="YYYY-MM-DD" />
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="押金（元）"
											name="deposit"
											rules={[{required: true}]}>
											<Input
												placeholder="请输入押金"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="首付（元）"
											name="downPayments">
											<Input
												placeholder="请输入首付"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="月租金（元）"
											name="monthlyRent">
											<Input
												placeholder="请输入月租金"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="月服务费（元）"
											name="monthlyServiceFee">
											<Input
												placeholder="请输入月服务费"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="月总租金（租金+服务费）（元）"
											name="totalMonthlyRent">
											<Input
												placeholder="请输入月总租金"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
									<Col
										sm={{span: 24}}
										md={{span: 12}}
										lg={{span: 8}}>
										<Form.Item
											label="尾款（元）"
											name="balancePayment">
											<Input
												placeholder="请输入尾款"
												maxLength={30}
											/>
										</Form.Item>
									</Col>
								</Row>
							</Form>
						</Panel>
						<Panel header={customizeHeader('奖励明细')} key="2">
							<>
								<CustomTable
									params={params}
									columns={columns}
									pagination
									total={total}
									scroll={{y: 500}}
									callback={(pagination: any) => {
										setParams(pagination)
									}}
									kid="id"
									loading={loading}
									dataSource={dataSourse}
								/>
							</>
						</Panel>
					</Collapse>
					<div className={styles.wrap}>
						<Button
							onClick={() => {
								dispatch({
									type: 'global/deleteTabs',
									payload: currentRoute,
								})
								history.push({
									pathname:
										'/merchantCenter/awardSettlement/subsidy',
								})
							}}>
							取消
						</Button>
					</div>
				</div>
				<Modal
					title="审核记录查看"
					open={processViewOpen}
					onCancel={onCancelProcessView}
					width="600px"
					destroyOnClose
					footer={
						<>
							<Button size="small" onClick={onCancelProcessView}>
								取消
							</Button>
						</>
					}>
					<>
						<Row gutter={12}>
							<Col sm={{span: 24}}>
								<div style={{overflow: 'hidden'}}>
									<Steps
										style={{display: 'initial'}}
										progressDot
										current={stepCurrent}
										items={processList}
									/>
								</div>
							</Col>
						</Row>
					</>
				</Modal>
				<Modal
					title="补扣费审核记录查看"
					open={formViewOpen}
					onCancel={onCancelformView}
					width="600px"
					destroyOnClose
					footer={
						<>
							<Button size="small" onClick={onCancelformView}>
								取消
							</Button>
						</>
					}>
					<>
						<Form
							form={detailForm}
							name="basic"
							layout="horizontal"
							labelCol={{flex: '100px'}}
							labelAlign="right"
							labelWrap
							initialValues={{remember: true}}
							disabled
							autoComplete="off">
							<Row gutter={12}>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 12}}>
									<Form.Item
										label="操作时间"
										name="createTime">
										<DatePicker format="YYYY-MM-DD HH:mm:ss" />
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 12}}>
									<Form.Item label="操作人" name="userName">
										<Input
											placeholder="请输入操作人"
											maxLength={30}
										/>
									</Form.Item>
								</Col>
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 12}}>
									<Form.Item
										label="处理状态"
										name="handlingStatus">
										<Select
											allowClear
											placeholder="请选择处理状态"
											fieldNames={{
												value: 'key',
												label: 'label',
											}}
											options={[...handlingStatus]}
										/>
									</Form.Item>
								</Col>
								<Col sm={{span: 24}} />
								<Col
									sm={{span: 24}}
									md={{span: 12}}
									lg={{span: 12}}>
									<Form.Item
										label="处理意见"
										name="handlingOpinions">
										<TextArea
											maxLength={200}
											placeholder="请输入处理意见（最多200个字）"
											autoSize={{
												minRows: 3,
												maxRows: 6,
											}}
										/>
									</Form.Item>
								</Col>
							</Row>
						</Form>
					</>
				</Modal>
			</div>
		)
	},
)
export default connect(({global, user}: any) => ({global, user}))(view)
